<template>
	<div class="table-tool-container">
		<HIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />
		<!-- <HIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onExportTable" /> -->
		<el-popover
			placement="top-end"
			trigger="click"
			transition="el-zoom-in-top"
			popper-class="table-tool-popper"
			:width="300"
			:persistent="false"
			@show="onSetTable"
		>
			<template #reference>
				<HIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
			</template>
			<template #default>
				<div class="tool-box">
					<el-tooltip content="拖动下方的箭头图标进行排序" placement="top-start">
						<HIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
					</el-tooltip>
					<el-checkbox
						v-model="state.checkListAll"
						:indeterminate="state.checkListIndeterminate"
						class="ml10 mr1"
						label="列显示"
						@change="onCheckAllChange"
					/>
					<el-checkbox v-model="config.isSerialNo" class="ml12 mr1" label="序号" />
					<el-checkbox v-model="config.isSelection" class="ml12 mr1" label="多选" />
					<el-checkbox v-model="config.isBorder" class="ml12 mr1" label="边框" />
				</div>
				<el-scrollbar>
					<div ref="toolSetRef" class="tool-sortable">
						<div class="tool-sortable-item" v-for="v in props.header" :key="v.key" :data-key="v.key">
							<i class="fa fa-arrows-alt handle cursor-grab"></i>
							<el-checkbox
								v-model="v.isCheck"
								size="default"
								class="ml12 mr8"
								:label="v.title"
								@change="onCheckChange"
							/>
						</div>
					</div>
				</el-scrollbar>
			</template>
		</el-popover>
	</div>
</template>

<script setup lang="ts" name="tableTool">
import { reactive, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import table2excel from "js-table2excel";
import Sortable from "sortablejs";
import "/@/theme/tableTool.scss";

// 定义父组件传过来的值
interface TableToolProps {
	config: TableConfigType; // 配置项
	header: TableHeaderType[]; // 表头内容
	selectedRows: EmptyObjectType[]; // 表格选中行
}
const props = defineProps<TableToolProps>();

// 定义父组件可触发的事件
const emit = defineEmits(["sort", "refresh"]);

// 定义页面变量
const { themeConfig } = storeToRefs(useThemeConfig());
const toolSetRef = ref();
const state = reactive({
	checkListAll: true,
	checkListIndeterminate: false,
});

// 表格设置 - 列显示全选改变时
const onCheckAllChange = <T>(val: T) => {
	if (val) props.header.forEach(v => (v.isCheck = true));
	else props.header.forEach(v => (v.isCheck = false));
	state.checkListIndeterminate = false;
};
// 表格设置 - 列显示当前项改变时
const onCheckChange = () => {
	const headers = props.header.filter(v => v.isCheck).length;
	state.checkListAll = headers === props.header.length;
	state.checkListIndeterminate = headers > 0 && headers < props.header.length;
};

// 导出
const onExportTable = () => {
	if (props.selectedRows.length <= 0) return ElMessage.warning("请先选择要导出的数据");
	table2excel(
		props.header
			.filter(v => v.isCheck)
			.map(item => {
				item.type = ["text", "image"].includes(item.type) ? item.type : "text";
				return item;
			}),
		JSON.parse(JSON.stringify(props.selectedRows)),
		`${document.title} ${new Date().toLocaleString()}`
	);
};
// 刷新
const onRefreshTable = () => {
	emit("refresh");
};
// 设置
const onSetTable = () => {
	nextTick(() => {
		const sortable = Sortable.create(toolSetRef.value, {
			handle: ".handle",
			dataIdAttr: "data-key",
			animation: 150,
			onEnd: () => {
				const headerList: TableHeaderType[] = [];
				sortable.toArray().forEach(val => {
					props.header.forEach(v => {
						if (v.key === val) headerList.push({ ...v });
					});
				});
				emit("sort", headerList);
			},
		});
	});
};
</script>

<style scoped lang="scss">
.table-tool-container {
	i {
		margin-right: 10px;
		cursor: pointer;
		color: var(--el-text-color-regular);
		&:last-of-type {
			margin-right: 0;
		}
	}
}
</style>
